<script setup>
import chooseOne from '@/assets/img/icon_chooseOne.png'
const emit = defineEmits(['confirm'])
const { ColumnsData } = defineProps({
  title: {
    type: String,
    default: ''
  },
  ColumnsData: {
    type: Array,
    default: ''
  }
})
const leftColumnsData = [
  {
    lable: '云南省文化和旅游局',
    id: '1',
  },
  {
    lable: '按直属单位',
    id: '2',
  },
]
const rightColumnsData = [
  {
    lable: '按直属单位',
    id: '1',
    parent_id: '1'
  },
  {
    lable: '云南省美术艺术博物馆',
    id: '2',
    parent_id: '1'
  },
  {
    lable: '云南省图书馆',
    id: '3',
    parent_id: '1'
  }
]
const openOrg = (item) => {
  item.disable = !item.disable
}


watch(
  () => ColumnsData,
  (newVal) => {
    emit('update:ColumnsData', ColumnsData)
  },
  { deep: true }
)
</script>

<template>
  <div style="align-items: normal;" class="flex flex m-t-11px box-border justify-between items-center">

    <!-- {{ ColumnsData }} -->
    <!-- <div class="unit-box box-border w-40%  p-t-10px border-r-1px border-r-solid border-r-[#F2F5FA]">
     <ul>
     <li @click="openOrg(1)">按所属科室</li>
     <li @click="openOrg(2)">按直属单位</li>
     </ul>
  </div> -->
    <div class="unit-box flex-1 p-10px  ">
      <ul class="type-list-item" v-for="item in ColumnsData">
        <li  :class="item.disable ? 'currt' : ''" @click="openOrg(item)">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="less">
.unit-box {
  font-family: 'PingFangSC-Regula' ;
  font-weight: 400;
  font-size: 14px;
  height: 40vh;
  overflow-y: auto;
  color: #1E2226;

  .type-list-item {
    li.currt {
      color: #229F60;
      background: url('../../../assets/img/icon_chooseOne.png');
      background-repeat: no-repeat;
      font-weight: bold;
      background-position: right center;
    }

    li {
      height: 35px;
    }
  }
}
</style>
